<template>
  <div class="asset-type-select">
    <van-nav-bar
      title="选择资产类型"
      left-arrow
      @click-left="onClickLeft"
      :style="{ backgroundColor: '#FFD847' }"
    />
    
    <div class="type-grid">
      <div 
        v-for="(name, type) in assetTypeMap" 
        :key="type" 
        class="type-item"
        :class="`type-${type}`"
        @click="selectType(type)"
      >
        <van-icon :name="getAssetIcon(type)" class="type-icon" />
        <div class="type-name">{{ name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

// 资产类型映射（调整顺序：其他类型在最后，负债在倒数第二）
const assetTypeMap = {
  1: '现金',
  2: '储蓄卡',
  3: '信用卡',
  4: '支付宝',
  5: '微信',
  7: '负债',
  6: '其他'
};

// 获取资产类型对应的图标
const getAssetIcon = (type) => {
  const iconMap = {
    1: 'cash-o',           // 现金
    2: 'card',             // 储蓄卡
    3: 'credit-pay',       // 信用卡
    4: 'alipay',           // 支付宝
    5: 'wechat-pay',       // 微信
    6: 'balance-o',        // 其他
    7: 'bill-o'            // 负债
  };
  return iconMap[type] || 'balance-o';
};

// 选择资产类型
const selectType = (type) => {
  router.push({
    path: '/asset-detail-input',
    query: { type }
  });
};

// 返回按钮点击事件
const onClickLeft = () => {
  router.back();
};
</script>

<style scoped>
.asset-type-select {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20px;
}

/* 导航栏样式 */
:deep(.van-nav-bar) {
  .van-nav-bar__title {
    color: #333;
    font-weight: bold;
  }
  
  /* 返回箭头样式 */
  .van-nav-bar__arrow {
    color: #333;
    font-size: 18px;
    font-weight: 600;
  }
}

.type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 12px;
  padding: 24px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.type-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.type-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.type-item:active {
  transform: scale(0.98);
}

.type-icon {
  font-size: 36px;
  margin-bottom: 12px;
  transition: all 0.3s ease;
}

.type-item:hover .type-icon {
  transform: scale(1.1);
}

.type-name {
  font-size: 14px;
  color: #333;
}

/* 现金 - 金色 */
.type-1 .type-icon {
  color: #fdc32f;
}

.type-1::after {
  background: linear-gradient(135deg, rgba(255, 184, 0, 0.08) 0%, rgba(255, 184, 0, 0) 100%);
}

/* 储蓄卡 - 蓝色 */
.type-2 .type-icon {
  color: #1677FF;
}

.type-2::after {
  background: linear-gradient(135deg, rgba(22, 119, 255, 0.08) 0%, rgba(22, 119, 255, 0) 100%);
}

/* 信用卡 - 红色 */
.type-3 .type-icon {
  color: #ff0000;
}

.type-3::after {
  background: linear-gradient(135deg, rgba(114, 46, 209, 0.08) 0%, rgba(114, 46, 209, 0) 100%);
}

/* 支付宝 - 蓝色 */
.type-4 .type-icon {
  color: #1677FF;
}

.type-4::after {
  background: linear-gradient(135deg, rgba(22, 119, 255, 0.08) 0%, rgba(22, 119, 255, 0) 100%);
}

/* 微信 - 绿色 */
.type-5 .type-icon {
  color: #07C160;
}

.type-5::after {
  background: linear-gradient(135deg, rgba(7, 193, 96, 0.08) 0%, rgba(7, 193, 96, 0) 100%);
}

/* 其他 - 灰色 */
.type-6 .type-icon {
  color: #8C8C8C;
}

.type-6::after {
  background: linear-gradient(135deg, rgba(140, 140, 140, 0.08) 0%, rgba(140, 140, 140, 0) 100%);
}

/* 负债 - 橙红色 */
.type-7 .type-icon {
  color: #FF6B6B;
}

.type-7::after {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, rgba(255, 107, 107, 0) 100%);
}
</style>